<template>
  <div class="mv">
    <div class="z"></div>
    <span class="iconfont icon-guanbi" @click="goDetail('/home', '')"></span>
    <span class="iconfont icon-fanhui" @click="fanHui"></span>
    <video autoplay controls :src="mv"></video>
    <div class="comment">
      评论区 {{ commentList ? commentList.length : "0" }}
    </div>
    <div v-if="commentList" class="comments">
      <p>精彩评论</p>
      <div
        class="pinglun"
        v-for="comment in commentList"
        :key="comment.commentid"
      >
        <div class="head">
          <img :src="comment.avatarurl" alt="" />
          <div class="ri">
            <div class="top">
              {{ comment.nick }}
              <img
                class="vip"
                v-if="comment.vipicon"
                :src="comment.vipicon"
                alt=""
              />
            </div>
            <div class="bot">{{ comment.time | famat }}</div>
          </div>
        </div>
        <p class="desc">{{ comment.rootcommentcontent }}</p>
      </div>
    </div>
    <van-empty v-else description="暂无评论" />
  </div>
</template>
<script>
export default {
  props: ['id'],
  data: () => ({
    mv: '',
    commentList: []
  }),
  methods: {
    async getMvUrl() {
      const res = await this.$http.getMvUrl(this.id)
      this.mv = res.data.data[this.id][0]
    },
    async getComment() {
      const res = await this.$http.getComment(this.id)
      console.log(res)
      this.commentList = res.data.data.comment.commentlist
    },
    fanHui() {
      this.$router.go(-1)
    }
  },
  created() {
    this.getMvUrl()
    this.getComment()
  }
}
</script>
<style lang="less">
.mv {
  .z {
    height: 215px;
  }
  .icon-guanbi {
    position: fixed;
    color: white;
    top: 20px;
    right: 10px;
    z-index: 1000;
  }
  .icon-fanhui {
    position: fixed;
    color: white;
    top: 20px;
    left: 10px;
    z-index: 1000;
  }
  .icon-guanbi:before {
    font-size: 30px;
  }
  video {
    width: 100%;
    position: fixed;
    top: 0;
  }
  .comment {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: rgb(17, 233, 161);
    font-size: 18px;
    padding-left: 10px;
    box-shadow: 0 0 10px 2px rgb(211, 209, 209);
  }
  .comments {
    width: 100%;
    padding-left: 10px;
    .pinglun {
      .head {
        display: flex;
        height: 50px;
        align-items: center;
        color: #a19b9b;
        .top {
          padding: 0;
          .vip {
            width: 20px;
            height: 20px;
          }
        }
        .bot {
          height: 20px;
        }
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .desc {
        margin-bottom: 10px;
        padding-left: 40px;
      }
    }
  }
}
</style>
